import { ref } from 'vue'

export function useFloatingPanel() {
  const anchors = [100, Math.round(0.45 * window.innerHeight), Math.round(0.6 * window.innerHeight)]
  const panelHeight = ref(anchors[0])
  const isFloatingPanelShow = ref(false)

  const setPanelHeight = (height: number) => {
    panelHeight.value = height
  }

  const showPanel = () => {
    isFloatingPanelShow.value = true
  }

  const hidePanel = () => {
    isFloatingPanelShow.value = false
  }

  return {
    anchors,
    panelHeight,
    isFloatingPanelShow,
    setPanelHeight,
    showPanel,
    hidePanel
  }
}
